<!DOCTYPE html>

<html lang="zh-CN">

<head>
    
    <title>使用js发送网络请求 - 塔纳托斯</title>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
    
    

    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <meta name="description" content="AJAX (Asynchronous JavaScript And XML（异步的 JavaScript 和 XML） 这个技术可以使用js执行异步网络请求 测试接口随便找了个java web的练习项目，先看看po对象 public class User {     private Integer id;     private String username;     private Strin">
<meta property="og:type" content="article">
<meta property="og:title" content="使用js发送网络请求">
<meta property="og:url" content="http://hai-chao.gitee.io/blog/2022/01/11/23.shi-yong-js-fa-song-wang-luo-qing-qiu/index.html">
<meta property="og:site_name" content="塔纳托斯">
<meta property="og:description" content="AJAX (Asynchronous JavaScript And XML（异步的 JavaScript 和 XML） 这个技术可以使用js执行异步网络请求 测试接口随便找了个java web的练习项目，先看看po对象 public class User {     private Integer id;     private String username;     private Strin">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2022-01-11T03:11:00.000Z">
<meta property="article:modified_time" content="2022-01-11T03:16:08.634Z">
<meta property="article:author" content="塔纳托斯">
<meta property="article:tag" content="总结">
<meta name="twitter:card" content="summary">
    <link rel="stylesheet" href="/blog/lib/jquery.fancybox.min.css?v=1679297521112">
    
    <link rel="stylesheet" href="/blog/lib/mdui_043tiny/css/mdui.css?v=1679297521112">
    <link rel="stylesheet" href="/blog/lib/iconfont/iconfont.css?v=1679297521112">
    <link rel="stylesheet" href="/blog/css/style.css?v=1679297521112">
     
    
<meta name="generator" content="Hexo 5.3.0"><link rel="alternate" href="/blog/atom.xml" title="塔纳托斯" type="application/atom+xml">
<link rel="stylesheet" href="/blog/css/prism-tomorrow.css" type="text/css"></head>

<body class="mdui-drawer-body-left">
    
    <div id="nexmoe-background">
        <div class="nexmoe-bg" style="background-image: url(https://cdn.jsdelivr.net/gh/nexmoe/nexmoe.github.io@latest/images/cover/5c3aec85a4343.jpg)"></div>
        <div class="mdui-appbar mdui-shadow-0">
            <div class="mdui-toolbar">
                <a mdui-drawer="{target: '#drawer', swipe: true}" title="menu" class="mdui-btn mdui-btn-icon mdui-ripple"><i class="mdui-icon nexmoefont icon-menu"></i></a>
                <div class="mdui-toolbar-spacer"></div>
                <!--<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>-->
                <a href="/blog/" title="塔纳托斯" class="mdui-btn mdui-btn-icon"><img src="https://s6.jpg.cm/2022/01/17/LFpniO.md.jpg" alt="塔纳托斯"></a>
            </div>
        </div>
    </div>
    <div id="nexmoe-header">
        <div class="nexmoe-drawer mdui-drawer" id="drawer">
    <div class="nexmoe-avatar mdui-ripple">
        <a href="/blog/" title="塔纳托斯">
            <img src="https://s6.jpg.cm/2022/01/17/LFpniO.md.jpg" alt="塔纳托斯" alt="塔纳托斯">
        </a>
    </div>
    <div class="nexmoe-count">
        <div><span>文章</span>29</div>
        <div><span>标签</span>6</div>
        <div><span>分类</span>0</div>
    </div>
    <div class="nexmoe-list mdui-list" mdui-collapse="{accordion: true}">
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple false" href="/blog/" title="文章归档">
            <i class="mdui-list-item-icon nexmoefont icon-container"></i>
            <div class="mdui-list-item-content">
                文章归档
            </div>
        </a>
        
    </div>
    <aside id="nexmoe-sidebar">
    
    
  <div class="nexmoe-widget-wrap">
    <div id="randomtagcloud" class="nexmoe-widget tagcloud nexmoe-rainbow">
      <a href="/blog/tags/java/" style="font-size: 10px;">java</a> <a href="/blog/tags/%E5%88%86%E4%BA%AB/" style="font-size: 20px;">分享</a> <a href="/blog/tags/%E5%90%83%E7%93%9C/" style="font-size: 10px;">吃瓜</a> <a href="/blog/tags/%E5%AD%A6%E4%B9%A0/" style="font-size: 16.67px;">学习</a> <a href="/blog/tags/%E6%80%BB%E7%BB%93/" style="font-size: 13.33px;">总结</a> <a href="/blog/tags/%E6%B8%B8%E5%90%8E%E6%84%9F/" style="font-size: 10px;">游后感</a>
    </div>
    
  </div>

    
</aside>
    <div class="nexmoe-copyright">
        &copy; 2023 塔纳托斯
        Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
        & <a href="https://github.com/theme-nexmoe/hexo-theme-nexmoe" target="_blank">Nexmoe</a>
        
    </div>
</div><!-- .nexmoe-drawer -->
    </div>
    <div id="nexmoe-content">
        <div class="nexmoe-primary">
            <div class="nexmoe-post">

  <article>
      
          <div class="nexmoe-post-cover"> 
              
              <h1>使用js发送网络请求</h1>
          </div>
      
      
      <div class="nexmoe-post-meta nexmoe-rainbow" style="margin:10px 0!important;">
    <a><i class="nexmoefont icon-calendar-fill"></i>2022年01月11日</a>
</div>

      

      <p>AJAX (<strong>A</strong>synchronous <strong>J</strong>avaScript <strong>A</strong>nd <strong>X</strong>ML（异步的 JavaScript 和 XML）</p>
<p>这个技术可以使用js执行异步网络请求</p>
<h2 id="测试接口"><a href="#测试接口" class="headerlink" title="测试接口"></a>测试接口</h2><p>随便找了个java web的练习项目，先看看po对象</p>
<pre class=" language-java"><code class="language-java"><span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">User</span> <span class="token punctuation">{</span>
    <span class="token keyword">private</span> Integer id<span class="token punctuation">;</span>
    <span class="token keyword">private</span> String username<span class="token punctuation">;</span>
    <span class="token keyword">private</span> String password<span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">/*  getter and setter  */</span>
<span class="token punctuation">}</span></code></pre>
<p>加一个TestController，在其中写一个测试接口</p>
<pre class=" language-java"><code class="language-java"><span class="token annotation punctuation">@Controller</span>
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">TestController</span> <span class="token punctuation">{</span>

    <span class="token annotation punctuation">@RequestMapping</span><span class="token punctuation">(</span>value <span class="token operator">=</span> <span class="token string">"/"</span><span class="token punctuation">)</span>
    <span class="token keyword">public</span> String <span class="token function">toTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token string">"test"</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token annotation punctuation">@RequestMapping</span><span class="token punctuation">(</span>value <span class="token operator">=</span> <span class="token string">"/test"</span><span class="token punctuation">)</span>
    <span class="token annotation punctuation">@ResponseBody</span>
    <span class="token keyword">public</span> String <span class="token function">test</span><span class="token punctuation">(</span>User user<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        System<span class="token punctuation">.</span>out<span class="token punctuation">.</span><span class="token function">println</span><span class="token punctuation">(</span>user<span class="token punctuation">.</span><span class="token function">getUsername</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span><span class="token string">":"</span><span class="token operator">+</span>user<span class="token punctuation">.</span><span class="token function">getPassword</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token string">"{\"code\":200,\"msg\":\"成功\",\"data\":null}"</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

<span class="token punctuation">}</span></code></pre>
<p>使用的视图技术为thymeleaf，因此启动后加载根路径时直接跳到test视图去</p>
<p>接口的返回值可以进行封装，这不属于重点，下次记录在谈</p>
<p>下一步建个视图，视图名test.html</p>
<pre class=" language-html"><code class="language-html"><span class="token doctype">&lt;!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span>th</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.thymeleaf.org<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Test<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formItem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        用户名:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">></span></span>
        密码:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>btn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
    <span class="token comment" spellcheck="true">//这里写脚本</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span></code></pre>
<h2 id="xhr发送请求"><a href="#xhr发送请求" class="headerlink" title="xhr发送请求"></a>xhr发送请求</h2><h3 id="xhr发送GET请求"><a href="#xhr发送GET请求" class="headerlink" title="xhr发送GET请求"></a>xhr发送GET请求</h3><p>1.旧时写法</p>
<pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
    <span class="token keyword">let</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#btn"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> url <span class="token operator">=</span> <span class="token string">"/test?"</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> formItem <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#formItem"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment" spellcheck="true">//将表单内容加到url中</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> el <span class="token keyword">of</span> formItem<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>el<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"name"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                url <span class="token operator">=</span> url <span class="token operator">+</span> el<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">"name"</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">"="</span> <span class="token operator">+</span> el<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
                url <span class="token operator">=</span> url <span class="token operator">+</span> <span class="token string">"&amp;"</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>

        url <span class="token operator">=</span> url<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span>url<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">sendXHR</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span>respResult<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">function</span> <span class="token function">sendXHR</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span>func<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        xhr<span class="token punctuation">.</span>onreadystatechange <span class="token operator">=</span> func<span class="token punctuation">;</span>
        xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"GET"</span><span class="token punctuation">,</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
        xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">function</span> <span class="token function">respResult</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>readyState <span class="token operator">==</span> <span class="token number">4</span> <span class="token operator">&amp;&amp;</span> xhr<span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
<p>2.目前写法</p>
<p>目前写法区别于旧时写法：</p>
<p><strong>监听xhr事件不在使用onreadystatechange</strong>，改用其他事件，下面三个事件最为常用</p>
<ul>
<li><code>load</code> —— 当请求完成（即使 HTTP 状态为 400 或 500 等），并且响应已完全下载</li>
<li><code>error</code> —— 当无法发出请求，例如网络中断或者无效的 URL</li>
<li><code>progress</code> —— 在下载响应期间定期触发，报告已经下载了多少</li>
</ul>
<p><strong>响应也不再使用responseText，使用xhr的属性response</strong></p>
<p>我们可以使用 <code>xhr.responseType</code> 属性来设置响应格式：</p>
<ul>
<li><code>&quot;&quot;</code>（默认）—— 响应格式为字符串</li>
<li><code>&quot;text&quot;</code> —— 响应格式为字符串</li>
<li><code>&quot;arraybuffer&quot;</code> —— 响应格式为 <code>ArrayBuffer</code></li>
<li><code>&quot;blob&quot;</code> —— 响应格式为 <code>Blob</code></li>
<li><code>&quot;document&quot;</code> —— 响应格式为 XML document（可以使用 XPath 和其他 XML 方法）</li>
<li><code>&quot;json&quot;</code> —— 响应格式为 JSON（自动解析）</li>
</ul>
<p>对于url的构建直接使用字符串拼接很麻烦，建议使用URL对象</p>
<p>URL对象中有<strong>searchParams属性</strong>，该属性中提供如下方法</p>
<ul>
<li><p><strong><code>append(name, value)</code></strong> —— 按照 <code>name</code> 添加参数</p>
</li>
<li><p><strong><code>delete(name)</code></strong> —— 按照 <code>name</code> 移除参数</p>
</li>
<li><p><strong><code>get(name)</code></strong> —— 按照 <code>name</code> 获取参数</p>
</li>
<li><p><strong><code>getAll(name)</code></strong> —— 获取相同 <code>name</code> 的所有参数（这是可行的，例如 <code>?user=John&amp;user=Pete</code>）</p>
</li>
<li><p><strong><code>has(name)</code></strong> —— 按照 <code>name</code> 检查参数是否存在</p>
</li>
<li><p><strong><code>set(name, value)</code></strong> —— set/replace 参数</p>
</li>
<li><p><strong><code>sort()</code></strong> —— 按 name 对参数进行排序，很少使用</p>
</li>
<li><p>……并且它是可迭代的，类似于 <code>Map</code></p>
</li>
</ul>
<p>使用URL对象的好处为有些字符编码问题，如非拉丁字母和空格等，使用 <code>URL</code> 对象会自动处理这些</p>
<pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
    <span class="token keyword">let</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#btn"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> url <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URL</span><span class="token punctuation">(</span><span class="token string">"/test"</span><span class="token punctuation">,</span>location<span class="token punctuation">.</span>origin<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> formItem <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#formItem"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> el <span class="token keyword">of</span> formItem<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>el<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"name"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                url<span class="token punctuation">.</span>searchParams<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>el<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">"name"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>el<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>

        xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"GET"</span><span class="token punctuation">,</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
        xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        xhr<span class="token punctuation">.</span>onload <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
<h3 id="xhr发送POST请求"><a href="#xhr发送POST请求" class="headerlink" title="xhr发送POST请求"></a>xhr发送POST请求</h3><p>POST请求相比GET请求多了一些步骤</p>
<ol>
<li>设置Http-header</li>
<li>在send方法中加入参数（要发送的数据）</li>
</ol>
<p>主要设置http-header为<code>Content-type</code>，常用值如下：</p>
<ul>
<li><code>application/json;charset=utf-8</code>，字符串（ JSON 编码的）</li>
<li><code>multipart/form-data</code> ，发送<strong>FormData</strong>对象</li>
<li><code>Blob</code>/<code>BufferSource</code> 发送二进制数据</li>
<li><code>application/x-www-form-urlencoded</code>，以URLSearchParams编码形式发送数据，很少使用（数据编码为：username=w&amp;password=1）</li>
</ul>
<p>下面演示发送json数据到test接口</p>
<pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
    <span class="token keyword">let</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#btn"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> url <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URL</span><span class="token punctuation">(</span><span class="token string">"/test"</span><span class="token punctuation">,</span>location<span class="token punctuation">.</span>origin<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> formItem <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#formItem"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> user <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> el <span class="token keyword">of</span> formItem<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>el<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"name"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token comment" spellcheck="true">//构造user对象，使用了js对象中计算属性的特性</span>
                user<span class="token punctuation">[</span>el<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">"name"</span><span class="token punctuation">)</span><span class="token punctuation">]</span> <span class="token operator">=</span> el<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>

        xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"POST"</span><span class="token punctuation">,</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
        xhr<span class="token punctuation">.</span><span class="token function">setRequestHeader</span><span class="token punctuation">(</span><span class="token string">"Content-type"</span><span class="token punctuation">,</span><span class="token string">"application/json;charset=utf-8"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span>JSON<span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        xhr<span class="token punctuation">.</span>onload <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
<p>由于数据为json格式，test接口要加个<code>@RequestBody</code>注解</p>
<pre class=" language-java"><code class="language-java"><span class="token keyword">public</span> String <span class="token function">test</span><span class="token punctuation">(</span><span class="token annotation punctuation">@RequestBody</span> User user<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">}</span></code></pre>
<h3 id="xhr发送FormData"><a href="#xhr发送FormData" class="headerlink" title="xhr发送FormData"></a>xhr发送FormData</h3><p>首先聊聊FormData，见名知意，FormData表示HTML 表单数据的对象</p>
<p>浏览器发送FormData在服务器角度来看，就像是一个普通的表单提交</p>
<p>看看该对象的方法：</p>
<ul>
<li><code>formData.append(name, value)</code> —— 添加具有给定 <code>name</code> 和 <code>value</code> 的表单字段</li>
<li><code>formData.append(name, blob, fileName)</code> —— 添加一个字段，就像它是 <code>&lt;input type=&quot;file&quot;&gt;</code>，第三个参数 <code>fileName</code> 设置文件名（而不是表单字段名），因为它是用户文件系统中文件的名称</li>
<li><code>formData.delete(name)</code> —— 移除带有给定 <code>name</code> 的字段</li>
<li><code>formData.get(name)</code> —— 获取带有给定 <code>name</code> 的字段值</li>
<li><code>formData.has(name)</code> —— 如果存在带有给定 <code>name</code> 的字段，则返回 <code>true</code>，否则返回 <code>false</code></li>
</ul>
<p>从技术上来讲，一个表单可以包含多个具有相同 <code>name</code> 的字段，因此，多次调用 <code>append</code> 将会添加多个具有相同名称的字段</p>
<p>还有一个 <code>set</code> 方法，语法与 <code>append</code> 相同。不同之处在于 <code>.set</code> 移除所有具有给定 <code>name</code> 的字段，然后附加一个新字段。因此，它确保了只有一个具有这种 <code>name</code> 的字段，其他的和 <code>append</code> 一样：</p>
<ul>
<li><code>formData.set(name, value)</code></li>
<li><code>formData.set(name, blob, fileName)</code></li>
</ul>
<p>下面演示一下</p>
<pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
    <span class="token keyword">let</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#btn"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> url <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URL</span><span class="token punctuation">(</span><span class="token string">"/test"</span><span class="token punctuation">,</span>location<span class="token punctuation">.</span>origin<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> formItem <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#formItem"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> formData <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span>formItem<span class="token punctuation">)</span><span class="token punctuation">;</span>

        xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"POST"</span><span class="token punctuation">,</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment" spellcheck="true">// 发送的为二进制数据，不设置Content-header也可以</span>
        <span class="token comment" spellcheck="true">// xhr.setRequestHeader("Content-header","multipart/form-data");</span>
        xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span>formData<span class="token punctuation">)</span><span class="token punctuation">;</span>
        xhr<span class="token punctuation">.</span>onload <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
<p><strong>演示的这个表单是很简单的，而表单项是可以很复杂的，如input的类型为file，或是想要向服务器发送图片（将图片转成二进制），这些内容我目前不大需要，我就不记录了</strong></p>
<h2 id="Fetch发送请求"><a href="#Fetch发送请求" class="headerlink" title="Fetch发送请求"></a>Fetch发送请求</h2><p><code>fetch()</code> 方法是一种<strong>目前通用的</strong>发送异步请求的方法</p>
<p>那为什么还在使用<code>XMLHttpRequest</code>，原因在于：</p>
<ol>
<li>维护老脚本，需要支持使用了 <code>XMLHttpRequest</code> 的脚本</li>
<li>兼容旧浏览器，如IE</li>
<li>fetch方法做不到的功能，跟踪上传进度</li>
</ol>
<p>看看<code>fetch()</code>的基本语法：</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token keyword">let</span> promise <span class="token operator">=</span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span><span class="token punctuation">[</span>option<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p><strong><code>options</code></strong> —— 可选参数：method，header 等</p>
<p>没有 <code>options</code>，那就是一个简单的 GET 请求</p>
<p><strong>为了获取 response body，我们需要使用一个其他的方法调用</strong></p>
<p><code>Response</code> 提供了多种基于 promise 的方法，来以不同的格式访问 body：</p>
<ul>
<li><strong><code>response.text()</code></strong> —— 读取 response，并以文本形式返回 response</li>
<li><strong><code>response.json()</code></strong> —— 将 response 解析为 JSON</li>
<li><strong><code>response.formData()</code></strong> —— 以 <code>FormData</code> 对象的形式返回 response</li>
<li><strong><code>response.blob()</code></strong> —— 以 Blob（具有类型的二进制数据）形式返回 response</li>
<li><strong><code>response.arrayBuffer()</code></strong> —— 以 ArrayBuffer（低级别的二进制数据）形式返回 response</li>
</ul>
<h3 id="核心"><a href="#核心" class="headerlink" title="核心"></a>核心</h3><p>由上述基础总结出，fetch发送请求的核心就2句代码</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> options<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 解析 response header</span>
<span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 将 body 读取为 json</span></code></pre>
<p>当然也可以使用 <strong>promise</strong> 形式，但我推荐用<strong>await</strong>形式</p>
<h3 id="发送GET请求"><a href="#发送GET请求" class="headerlink" title="发送GET请求"></a>发送GET请求</h3><pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
    document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#btn"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> url <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URL</span><span class="token punctuation">(</span><span class="token string">"/test"</span><span class="token punctuation">,</span>location<span class="token punctuation">.</span>origin<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> formItem <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#formItem"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> el <span class="token keyword">of</span> formItem<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>el<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"name"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                url<span class="token punctuation">.</span>searchParams<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>el<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">"name"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>el<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>

        <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
<h3 id="发送POST请求"><a href="#发送POST请求" class="headerlink" title="发送POST请求"></a>发送POST请求</h3><p>需要使用到fetch 选项：</p>
<ul>
<li><code>method</code> —— HTTP 方法</li>
<li><code>headers</code> —— 具有 request header 的对象（不是所有 header 都是被允许的）</li>
<li><code>body</code> —— 要以 <code>string</code>，<code>FormData</code>，<code>BufferSource</code>，<code>Blob</code> 或 <code>UrlSearchParams</code> 对象的形式发送的数据（request body）</li>
</ul>
<pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
    document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#btn"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> url <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URL</span><span class="token punctuation">(</span><span class="token string">"/test"</span><span class="token punctuation">,</span>location<span class="token punctuation">.</span>origin<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> formItem <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#formItem"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> user <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> el <span class="token keyword">of</span> formItem<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>el<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"name"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                user<span class="token punctuation">[</span>el<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">"name"</span><span class="token punctuation">)</span><span class="token punctuation">]</span> <span class="token operator">=</span> el<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>

        <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span><span class="token punctuation">{</span>
            method <span class="token punctuation">:</span> <span class="token string">"POST"</span><span class="token punctuation">,</span>
            headers<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                <span class="token string">"Content-type"</span> <span class="token punctuation">:</span> <span class="token string">"application/json;charset=utf-8"</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            body<span class="token punctuation">:</span> JSON<span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
<h3 id="发送FormData"><a href="#发送FormData" class="headerlink" title="发送FormData"></a>发送FormData</h3><p>当我们想要检查响应头，来检查 HTTP 状态以确定请求是否成功时，可以用到如下属性</p>
<ul>
<li><strong><code>status</code></strong> —— HTTP 状态码，例如 200</li>
<li><strong><code>ok</code></strong> —— 布尔值，如果 HTTP 状态码为 200-299，则为 <code>true</code></li>
</ul>
<pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
    document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#btn"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> url <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URL</span><span class="token punctuation">(</span><span class="token string">"/test"</span><span class="token punctuation">,</span>location<span class="token punctuation">.</span>origin<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> formItem <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#formItem"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> formData <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span>formItem<span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span><span class="token punctuation">{</span>
            method <span class="token punctuation">:</span> <span class="token string">"POST"</span><span class="token punctuation">,</span>
            body<span class="token punctuation">:</span> formData
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token keyword">if</span> <span class="token punctuation">(</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span>status<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
<h2 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h2><p>本次记录介绍了xhr和Fetch最为基础的部分，但足够使用。像一些深入的内容如Fetch<strong>追踪下载进度</strong>，<strong>中止</strong>，<strong>跨源请求</strong>等等，目前不太需要用到。还有一些网络请求是浏览器想要和服务器建立持久连接，这时需要用到<strong>长轮询</strong>的方式，如 WebSocket 或者 Server Sent Event，举一下应用场景：如网络游戏，实时交易系统等。</p>

  </article>

  
      
    <div class="nexmoe-post-copyright">
        <strong>本文作者：</strong>塔纳托斯<br>
        <strong>本文链接：</strong><a href="http://hai-chao.gitee.io/blog/2022/01/11/23.shi-yong-js-fa-song-wang-luo-qing-qiu/" title="http:&#x2F;&#x2F;hai-chao.gitee.io&#x2F;blog&#x2F;2022&#x2F;01&#x2F;11&#x2F;23.shi-yong-js-fa-song-wang-luo-qing-qiu&#x2F;" target="_blank" rel="noopener">http:&#x2F;&#x2F;hai-chao.gitee.io&#x2F;blog&#x2F;2022&#x2F;01&#x2F;11&#x2F;23.shi-yong-js-fa-song-wang-luo-qing-qiu&#x2F;</a><br>
        
            <strong>版权声明：</strong>本文采用 <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/cn/deed.zh" target="_blank">CC BY-NC-SA 3.0 CN</a> 协议进行许可
        
    </div>


  
  
  <div class="nexmoe-post-meta nexmoe-rainbow">
    
    
        <a class="nexmoefont icon-tag-fill -none-link" href="/blog/tags/%E6%80%BB%E7%BB%93/" rel="tag">总结</a>
    
</div>

  
      <div class="nexmoe-post-footer">
          
      </div>
  
</div>
            <div class="nexmoe-post-right">
              <div class="nexmoe-fixed">
                  <div class="nexmoe-tool"> 
                    
                      
                        
                          
                          
                              <button class="mdui-fab catalog" style="overflow:unset;">
                                  <i class="nexmoefont icon-i-catalog"></i>
                                  <div class="nexmoe-toc">
                                      <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%8B%E8%AF%95%E6%8E%A5%E5%8F%A3"><span class="toc-number">1.</span> <span class="toc-text">测试接口</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#xhr%E5%8F%91%E9%80%81%E8%AF%B7%E6%B1%82"><span class="toc-number">2.</span> <span class="toc-text">xhr发送请求</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#xhr%E5%8F%91%E9%80%81GET%E8%AF%B7%E6%B1%82"><span class="toc-number">2.1.</span> <span class="toc-text">xhr发送GET请求</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#xhr%E5%8F%91%E9%80%81POST%E8%AF%B7%E6%B1%82"><span class="toc-number">2.2.</span> <span class="toc-text">xhr发送POST请求</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#xhr%E5%8F%91%E9%80%81FormData"><span class="toc-number">2.3.</span> <span class="toc-text">xhr发送FormData</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Fetch%E5%8F%91%E9%80%81%E8%AF%B7%E6%B1%82"><span class="toc-number">3.</span> <span class="toc-text">Fetch发送请求</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A0%B8%E5%BF%83"><span class="toc-number">3.1.</span> <span class="toc-text">核心</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%91%E9%80%81GET%E8%AF%B7%E6%B1%82"><span class="toc-number">3.2.</span> <span class="toc-text">发送GET请求</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%91%E9%80%81POST%E8%AF%B7%E6%B1%82"><span class="toc-number">3.3.</span> <span class="toc-text">发送POST请求</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%91%E9%80%81FormData"><span class="toc-number">3.4.</span> <span class="toc-text">发送FormData</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%93%E8%AF%AD"><span class="toc-number">4.</span> <span class="toc-text">结语</span></a></li></ol>
                                  </div>
                              </button>
                          
                          
                      
                    
                      <a href="#nexmoe-content" class="toc-link" aria-label="回到顶部" title="top"><button class="mdui-fab mdui-ripple"><i class="nexmoefont icon-caret-top"></i></button></a>
                  </div>
              </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/combine/npm/lazysizes@5.1.0/lazysizes.min.js,npm/mdui@0.4.3/dist/js/mdui.min.js?v=1"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

 

<script async src="/blog/js/app.js?v=1679297521115"></script>



<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/js/jquery.justifiedGallery.min.js"></script>
<script>
	$(".justified-gallery").justifiedGallery({
		rowHeight: 160,
		margins: 10,
	});
</script>


    





</body>

</html>
